<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('bff接口 字段参数选择页面')" />
    <link th:href="@{/css/common.css}" rel="stylesheet"/>
    <link th:href="@{/js/plugins/swiper/swiper-bundle.css}" rel="stylesheet"/>
    <link th:href="@{/css/choose_data_map.css}" rel="stylesheet"/>
    <script th:src="@{/js/plugins/swiper/swiper-bundle.js}"></script>
    <style>
        .fixed-table-toolbar{
            display: none;
        }
    </style>
</head>
<body>
<div class="wrapper wrapper-content field">
    <form id="form-interface-field">
        <div class="content">
            <div class="swiper tabSwiper">
                <ul class="nav nav-tabs first-navtabs swiper-wrapper" role="tablist">
                </ul>
            </div>
            <div class="tab-content" id="tabDiv">
            </div>
        </div>
    </form>
</div>
</body>
<th:block th:include="include :: footer" />
<script th:inline="javascript">
    var prefix = "http://code.suzhi.link:8070";
    var fieldId = [[${fieldId}]];
    var tableEnName = [[${enname}]];
    var columns=[];
    function submitHandler() {
        var rows = $.common.isEmpty(table.options.uniqueId) ? $.table.selectFirstColumns() : $.table.selectColumns(table.options.uniqueId);
        if (rows.length == 0) {
            $.modal.alertWarning("请选择一条记录");
            return;
        }
        parent.updateDataByChoose(fieldId,rows[0]);
        $.modal.close();
    }

    $(function () {
        if(tableEnName){
            initUl([{id:fieldId, tablename:'', tableenname:tableEnName}])
        }else{
            queryTableForeign()
        }
    })
    // 获取表详情
    function queryTableForeign() {
        let config = {
            url: prefix+"/tTableInfo/queryTableForeign",
            type: "post",
            dataType: "json",
            contentType:"application/json",
            async:false,
            data: JSON.stringify({
                "fieldId": fieldId
            }),
            beforeSend: function () {
                $.modal.loading("正在处理中，请稍后...");
            },
            success: function (result) {
                $.modal.closeLoading();
                if (result.errCode == 1) {
                    initUl(result.data)
                    return false;
                }
                if (result.code == web_status.WARNING) {
                    $.modal.alertWarning(result.message)
                    return false;
                }
                $.modal.alertError(result.message);
            }
        };
        $.ajax(config);
    }

    function initUl(tableList) {
        if (tableList && tableList.length > 0) {
            for (var i=0; i<tableList.length; i++) {
                var virtualUsageTpl = $("#TableTpl").html();
                var {id, tablename, tableenname}= tableList[i];
                laytpl(virtualUsageTpl).render(id, function (html) {
                    $("#tabDiv").append(html);
                });
                if (i==0) {
                    $("ul").append("<li class='swiper-slide active'><a aria-expanded='true'  href='#tab-"+id+"' onclick='clickTab("+id+",\""+tableenname+"\")' role='tab' data-toggle='tab' style = 'margin-right: 15px;'>"+tablename+"</a></li>");
                    $("#tab-" + id).addClass('active');
                    clickTab(id,tableenname);
                } else {
                    $("ul").append("<li class='swiper-slide'><a aria-expanded='false' href='#tab-"+id+"' onclick='clickTab("+id+",\""+tableenname+"\")' role='tab' data-toggle='tab' style = 'margin-right: 15px;'>"+tablename+"</a></li>");
                }
            }
            new Swiper(".tabSwiper", {
                centeredSlidesBounds: true,
                slidesPerView: "auto",
                spaceBetween: 0,
                grabCursor: true,
                slideToClickedSlide: true
            });
        }
    }

    var record = {};
    function clickTab(id,tableEnName) {
        if (!record[id]) {
            fieldInfoList(id)
            loadField(id,tableEnName);
            record[id] = true;
        }
    }

    function loadField(tableId, tableEnName) {
        var options = {
            id:"bootstrap-table"+tableId,
            url: prefix + "/tTableInfo/queryByPage",
            queryParams: function (params) {
                return{
                    "current": Math.ceil(params.offset/params.limit)+1,
                    "params": {
                        "tableId": tableId,
                        "tableName": tableEnName
                    },
                    "size": params.limit
                }
            },
            contentType:"application/json",
            modalName: "表对象信息",
            columns:columns
        };
        $.table.init(options);
    }
    // 获取字段
    function fieldInfoList(id) {
        let config = {
            url: prefix + "/tFieldInfo/queryFiledInfo",
            type: "post",
            dataType: "json",
            contentType:"application/json",
            async:false,
            data: JSON.stringify({
                "tableId": id
            }),
            beforeSend: function () {
                $.modal.loading("正在处理中，请稍后...");
            },
            success: function (result) {
                $.modal.closeLoading();
                if (result.errCode == 1) {
                    columns = []
                    columns.push({radio: true})
                    result.data.forEach((e) =>{
                        // if(columns.length>=6){
                        //     return false
                        // }
                        columns.push(Object.assign({}, {title: e.fieldname, field: e.mysqlfieldname, width: 200}))
                    })
                    return false;
                }
                if (result.code == web_status.WARNING) {
                    $.modal.alertWarning(result.message)
                    return false;
                }
                $.modal.alertError(result.message);
            }
        };
        $.ajax(config);
    }
</script>
<script id="TableTpl" type="text/template">
    <div id="tab-{{d}}" class="tab-pane">
        <table class="table table-hover" style = "margin-top:10px;border:none;" id="bootstrap-table{{d}}">
        </table>
    </div>
</script>
</html>
